<template>
    <div class="container">
        <!-- 导航 -->
        <div class="nav">
            问卷详情 
            <div class="nav-btn ">
                <a>返回</a>
            </div>
        </div>
        <div class="placeholder">
        </div>
        <div class="body mar-top " v-loading="loading"  element-loading-text="拼命加载中">
            <div class=" main box">
                <!-- 问卷标题 -->
                <div>
                    <h2 class="title">{{paper.title}}</h2>
                </div>
                <!-- 题目列表 -->
                <div class="list">
                    <div class="list_item"  v-for="(question,qIdx) in paper.questions" :key="qIdx">
                        <!-- 问卷题目名称 -->
                        <h2  class="name">{{(question.index + 1 )+"、" + question.name }}</h2>
                         <!-- 题目选项 -->
                        <div class="options" v-if="question.type != 0">

                            <div class="option" v-for="(option,oIdx) in question.options" :key="oIdx" >
                                <!-- 选项序号 -->
                                <div :class="{active:option.isSelected,option_number:true}"  @click="selectOption(qIdx,oIdx)">
                                    {{getLetter(oIdx)}}
                                </div>
                                <!-- 选项内容 -->
                                <div class="option_text">
                                    {{option.content}}
                                </div>
                            </div>
                        </div>
                        <div class="text" v-else>
                            <!-- v-model="paper['q_'+qIdx+ '_text' ]"> -->
                            <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                maxlength="300"
                                minlength="100"
                                show-word-limit
                                :autosize="{ minRows: 4, maxRows: 8}"
                                @input="textAreaInput"
                                v-model="paper['q_'+qIdx+ '_text' ]">
                            </el-input>
                        </div>

                    </div>
                </div>

                <!-- 提交按钮 -->
                <div class="paper_btns">
                    <div v-if="!isPreview">
                          <el-button size="small" round @click="resetAnswer">重置</el-button>
                          <el-button size="small" round type="primary" @click="submitForm">提交</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// import { save,get} from "@/api/questionnaire/questionnaire";
// import { add,update,get} from "@/api/questionnaire/question";
import { add,updateAnswer,getAnswer} from "@/api/questionnaire/answer";
export default {
    data() {
        return {
            isPreview:false,
            loading:false,
            paper:{
                title:"辅导员满意度问卷调查",
                questions:[
                    {
                        index:0,
                        type: 1,
                        name:'请问你对辅导员的工作是否满意?',
                        options:[
                            {
                                content:"满意",
                                score:5
                            },
                            {
                                content:"比较满意",
                                score:3
                            },
                            {
                                content:"不太满意",
                                score:1
                            },
                            {
                                content:"太满意",
                                score:0
                            }
                        ]
                    },

                    {
                        index:1,
                        type: 2,
                        name:'请问你对辅导员的工作是否满意?',
                        options:[
                            {
                                content:"满意",
                                score:5
                            },
                            {
                                content:"比较满意",
                                score:3
                            },
                            {
                                content:"不太满意",
                                score:1
                            },
                            {
                                content:"太满意",
                                score:0
                            }
                        ]
                    },


                    {
                        index:2,
                        type: 0,
                        name:'今后辅导的工作你有什么意见和建议?',
                        
                    },

                ]
                
            },
            
        };
    },
    created(){

        if(this.$route.query.id){
            this.loading = true;
            getAnswer(this.$route.query.id).then(res=>{
                if(res.code == 200 && res.data){
                    let data = {};
                    Object.assign(data,{
                        questions:JSON.parse(res.data.questions),
                        title:res.data.title,
                        id:res.data.id
                    });
                    this.paper = data;
                    this.transPaper1();
                }
                this.loading = false;
                this.isPreview = false;
            });
        }else{
            this.isPreview = true;
             this.paper = JSON.parse(sessionStorage.getItem("paper"));
            
        }
        // if(Object.keys(this.$route.params).length > 0 &&( this.$route.params.id == null )){
        //     //预览
        //     this.paper =  this.$route.params;
        //     this.isPreview = true;
            
        // }else{
        //     console.log(this.$route.params.id);
        //     this.loading = true;
        //     getAnswer(this.$route.params.id).then(res=>{
        //         if(res.code == 200 && res.data){
        //             let data = {};
        //             Object.assign(data,{
        //                 questions:JSON.parse(res.data.questions),
        //                 title:res.data.title,
        //                 id:res.data.id
        //             });
  
        //         this.paper = data;
        //     }
        //     this.loading = false;
        //     })
        // }
        
        

        
    },
    methods:{
        textAreaInput(){
            this.$forceUpdate();
        },
        //验证是都填了
        paperVaild(){
            for(let i = 0; i< this.paper.questions.length; i++ ){
                let type = this.paper.questions[i].type;
                let question = this.paper.questions[i];
                if(type == 1 || type == 2){
                    let options = question.options;
             
                    if(!this.hasSelected(options)){
                        this.$alert('"' + (question.index + 1) + '、' +question.name + '", 未作答', '消息提示', {
                            confirmButtonText: '确定',
                            type: 'error'
                        });
                        return false;
                    }
                }
                if(type == 0){
                    console.log(question.text)
                    if(!question.text){
                        this.$alert('"' + (question.index + 1) + '、' +question.name + '", 未作答', '消息提示', {
                            confirmButtonText: '确定',
                            type: 'error'
                        });
                        return false;  
                    }

                }
            }
            return true;
        },
        hasSelected(options){
            for(let j = 0; j < options.length; j ++ ){
                if(options[j].isSelected == 1){
                    //有选中的当前跳出循环
                    return true;
                }
            }
            return false;
        },
        //把q_xx_text 重新设置回题目中
        transPaper(){
            for(let i = 0;i < this.paper.questions.length;i++){
                let type = this.paper.questions[i].type;
                if(type == 0){
                    this.paper.questions[i].text = this.paper['q_'+ i + '_text'];
                }
            }
        },
        //
        transPaper1(){
            for(let i = 0;i < this.paper.questions.length;i++){
                let type = this.paper.questions[i].type;
                if(type == 0){
                   this.paper['q_'+ i + '_text'] =  this.paper.questions[i].text;
              
                }
            }
        },
        deleteKey(){
            let needAttr = ['questions','title','id'];
            let keys = Object.keys(this.paper);
            for(let i = 0;i < keys.length; i++ ){
                if(!needAttr.includes(keys[i])){
                    //不包含则删除掉
                    delete this.paper[keys[i]]
                    let need
                }
            }
    
        },
        //重置按钮
        resetAnswer(){
            //把 不是questions 和 title的属性全删了
           
            this.deleteKey();
            for(let i = 0;i< this.paper.questions.length;i++){
                let question = this.paper.questions[i];
                if(question.type == 1 || question.type == 2){
                    //是选择题全部设置为未选择
                    for(let j = 0; j < this.paper.questions[i].options.length; j++){
                         this.paper.questions[i].options[j].isSelected = 0;
                    }
                }
            }
            this.$forceUpdate();
        },
        /**
         * questionIndxe: 题目的index
         * optionIndex：题目选项的index
         */
        selectOption(questionIndxe,optionIndex){
            // 获取题目
            let question = this.paper.questions[questionIndxe];
          
            if(question.type == 1){
                //单选题
                

                let isSelected =  this.paper.questions[questionIndxe].options[optionIndex].isSelected;
                if(isSelected){
                    this.paper.questions[questionIndxe].options[optionIndex].isSelected = 0;
                }else{
                    this.paper.questions[questionIndxe].options[optionIndex].isSelected = 1;
                }
                
                for(let i = 0;i < this.paper.questions[questionIndxe].options.length; i++){
                    if(i != optionIndex){

                        if(this.paper.questions[questionIndxe].options[optionIndex].isSelected ){
                            this.paper.questions[questionIndxe].options[i].isSelected = 0;
                        }
                    }
                    
                }
                console.log(this.paper);
                this.$forceUpdate();
                return;
            }
            if(question.type == 2){
                
                  let isSelected =  this.paper.questions[questionIndxe].options[optionIndex].isSelected;
                //多选题
                if(isSelected){
                    this.paper.questions[questionIndxe].options[optionIndex].isSelected = 0;
                }else{
                    this.paper.questions[questionIndxe].options[optionIndex].isSelected = 1;
                }
                 this.$forceUpdate();
                return;
                
                
            }
        
           
        },
       
        //获取大写字母
        getLetter(index){
            return String.fromCharCode(65 + index);
        },
     
        // 提交问卷
        submitForm() {
            this.transPaper();
          
            if(this.paperVaild()){
                this.deleteKey();//发送到后端前删除不必要的
              
                let data = {};
                console.log(this.paper.id);
                Object.assign(data,{
                    questions:JSON.stringify(this.paper.questions),
                    title:this.paper.title,
                    id:this.paper.id})
                    updateAnswer(data).then(res=>{
                        if(res.code == 200){
                            this.$modal.msgSuccess("提交成功");
                        }
                    });
            }
        
        },
    }
}
</script>

<style  scoped>

/* nav  标题   保存  预览  保存发布等按钮*/
.container{
    position: relative;
    height: 100%;
    background-color: #f2f4f7;

}
.body {
      background-color: #f2f4f7;
}
.nav{
    width: 100%;
    height: 40px;
    background: #3A4357;
    box-shadow: 0 2px 17px 0 rgba(211, 211, 211, 0.50);
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    color: #A8A8B3;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
}
.nav-btn {
    position: absolute;
    left: 0;
    top: 0;
}


.nav-btn a {
    float: left;
    width: auto;
    padding: 0 20px;
    color: white;
}
.nav-btn a.completeBtn{
    background-color: #409EFF;
}
.placeholder{
    width: 100%;
    height: 40px;
}
/* 版心 */
.main{
    width: 1200px;
    margin: 0 auto;
}
.mar-top{
    margin-top: 20px;
}
.box{
    padding: 24px 20px 15px 24px;
    background: #fff;
    box-shadow: 0px 2px 10px 0px rgba(237, 238, 240, 0.5);
    border-radius: 8px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
/* 问卷标题 */
.title{
    font-size: 18px;
    color: #181E33;
    line-height: 25px;
    font-weight: bold;
}

.list_item .name{
    color: #181E33;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
}

/* 选项 */
.option{
    display: flex;
    justify-content: start;
    gap: 10px;

    margin-bottom: 16px;
}
.option_number{
    text-align: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #E1EAF4;
    line-height: 22px;
    font-size: 14px;
    color: #646873;
    cursor: pointer;
}
.active{
    background-color: #409EFF;
    border: 1px solid #409EFF;
    color: #fff;
}
.option_score{
    width: 65px;
}
.option_text{
    width: 360px;
}
.list_item .text{
    width: 680px;
}

/* 提交和重置按钮 */
.paper_btns{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.paper_btns>div{
    display: flex;
    gap: 10px;
}
</style>